<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue项目的模式和环境变量[#](https://cli.vuejs.org/zh/guide/mode-and-env.html#模式和环境变量) | 爆米花小布</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/favicon.ico">
    <script defer="defer" async="async" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script>
    <meta name="description" content=" ">
    
    <link rel="preload" href="/assets/css/0.styles.54de4a22.css" as="style"><link rel="preload" href="/assets/js/app.36e8cb25.js" as="script"><link rel="preload" href="/assets/js/2.cd8e88cf.js" as="script"><link rel="preload" href="/assets/js/41.5dfb852e.js" as="script"><link rel="prefetch" href="/assets/js/10.5a175a73.js"><link rel="prefetch" href="/assets/js/11.7c8d5810.js"><link rel="prefetch" href="/assets/js/12.c77aca0d.js"><link rel="prefetch" href="/assets/js/13.fc475cb0.js"><link rel="prefetch" href="/assets/js/14.517ed6e7.js"><link rel="prefetch" href="/assets/js/15.7dc9cc39.js"><link rel="prefetch" href="/assets/js/16.4223237a.js"><link rel="prefetch" href="/assets/js/17.0e3dcd26.js"><link rel="prefetch" href="/assets/js/18.132512c7.js"><link rel="prefetch" href="/assets/js/19.55275db3.js"><link rel="prefetch" href="/assets/js/20.621b52a1.js"><link rel="prefetch" href="/assets/js/21.daa66e46.js"><link rel="prefetch" href="/assets/js/22.537fd259.js"><link rel="prefetch" href="/assets/js/23.81c79725.js"><link rel="prefetch" href="/assets/js/24.ee80a08c.js"><link rel="prefetch" href="/assets/js/25.260c7616.js"><link rel="prefetch" href="/assets/js/26.03e10148.js"><link rel="prefetch" href="/assets/js/27.768e5af1.js"><link rel="prefetch" href="/assets/js/28.ad0f08eb.js"><link rel="prefetch" href="/assets/js/29.9e188b97.js"><link rel="prefetch" href="/assets/js/3.9cba588d.js"><link rel="prefetch" href="/assets/js/30.f2aa9a7c.js"><link rel="prefetch" href="/assets/js/31.93c74095.js"><link rel="prefetch" href="/assets/js/32.4735eb89.js"><link rel="prefetch" href="/assets/js/33.7b05518b.js"><link rel="prefetch" href="/assets/js/34.3db00b39.js"><link rel="prefetch" href="/assets/js/35.ea9a0227.js"><link rel="prefetch" href="/assets/js/36.5873bde7.js"><link rel="prefetch" href="/assets/js/37.2cbd5350.js"><link rel="prefetch" href="/assets/js/38.6c2de9e4.js"><link rel="prefetch" href="/assets/js/39.d3c0116f.js"><link rel="prefetch" href="/assets/js/4.97aec80c.js"><link rel="prefetch" href="/assets/js/40.47b05f9f.js"><link rel="prefetch" href="/assets/js/42.1d7cf4c2.js"><link rel="prefetch" href="/assets/js/43.43f59d94.js"><link rel="prefetch" href="/assets/js/44.19309bf6.js"><link rel="prefetch" href="/assets/js/45.dbee3f0a.js"><link rel="prefetch" href="/assets/js/46.a373745d.js"><link rel="prefetch" href="/assets/js/5.bc4ebf1d.js"><link rel="prefetch" href="/assets/js/6.805bb5f3.js"><link rel="prefetch" href="/assets/js/7.9724c5a3.js"><link rel="prefetch" href="/assets/js/8.6c6d5662.js"><link rel="prefetch" href="/assets/js/9.641efeda.js">
    <link rel="stylesheet" href="/assets/css/0.styles.54de4a22.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">爆米花小布</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/element-ui/el-table-select-all/" class="nav-link">
  前端博客
</a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-element-dict/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  PC端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-vant-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  移动端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/element-ui/el-table-select-all/" class="nav-link">
  前端博客
</a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-element-dict/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  PC端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-vant-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  移动端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Element-ui组件使用经验</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/element-ui/el-table-select-all/" class="sidebar-link">使用el-table实现全选功能</a></li><li><a href="/element-ui/el-table-sku/" class="sidebar-link">利用element实现sku规格相关功能</a></li><li><a href="/element-ui/el-cropper/" class="sidebar-link">利用vue-cropper实现图片裁剪功能</a></li><li><a href="/element-ui/el-form-nesting/" class="sidebar-link">el-form嵌套表单校验</a></li><li><a href="/element-ui/el-theme/" class="sidebar-link">使用element-ui组件库实现主题切换功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JS必备知识</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/JS/call-apply-bind/" class="sidebar-link">js中的call、apply和bind</a></li><li><a href="/JS/debounce-throttle/" class="sidebar-link">JS中防抖与节流的讲解与封装</a></li><li><a href="/JS/tree-data/" class="sidebar-link">JS中树形结构数据相关方法</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>CSS实战经验</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/CSS/contour-layout/" class="sidebar-link">css实现等高布局</a></li><li><a href="/CSS/fixed-aspect-ratio/" class="sidebar-link">css实现固定宽高比</a></li><li><a href="/CSS/draw-triangle/" class="sidebar-link">CSS画一个三角形</a></li><li><a href="/CSS/draw-ring/" class="sidebar-link">CSS画一个环形进度条</a></li><li><a href="/CSS/pseudo-class/" class="sidebar-link">伪类和伪元素的区别与使用</a></li><li><a href="/CSS/clear-float/" class="sidebar-link">清除浮动的原理与时机</a></li><li><a href="/CSS/layout/" class="sidebar-link">三栏布局问题（左右固定宽度 中间自适应）</a></li><li><a href="/CSS/flex/" class="sidebar-link">flex布局祥解</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>实用的npm包</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/npm/xiaobu-pic-zoom/" class="sidebar-link">xiaobu-pic-zoom图片放大镜</a></li><li><a href="/npm/vue-message-code/" class="sidebar-link">vue-message-code短信验证码</a></li><li><a href="/npm/xiaobu-water-marker/" class="sidebar-link">xiaobu-water-marker水印</a></li><li><a href="/npm/vue-flutter/" class="sidebar-link">vue-flutter漂浮动画</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>VUE小妙招</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-config/search-menu/" class="sidebar-link">利用fuse.js实现搜索菜单功能</a></li><li><a href="/vue-config/alias/" class="sidebar-link">vue项目配置别名</a></li><li><a href="/vue-config/svg-sprite-loader/" class="sidebar-link">vue项目配置使用svg图标</a></li><li><a href="/vue-config/vue-mode-env/" aria-current="page" class="active sidebar-link">vue项目的模式和环境变量</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-config/vue-mode-env/#模式" class="sidebar-link">模式[#](https://cli.vuejs.org/zh/guide/mode-and-env.html#模式)</a></li><li class="sidebar-sub-header"><a href="/vue-config/vue-mode-env/#环境变量" class="sidebar-link">环境变量[#](https://cli.vuejs.org/zh/guide/mode-and-env.html#环境变量)</a></li><li class="sidebar-sub-header"><a href="/vue-config/vue-mode-env/#示例-staging-模式" class="sidebar-link">示例：Staging 模式[#](https://cli.vuejs.org/zh/guide/mode-and-env.html#示例：staging-模式)</a></li><li class="sidebar-sub-header"><a href="/vue-config/vue-mode-env/#在客户端侧代码中使用环境变量" class="sidebar-link">在客户端侧代码中使用环境变量[#](https://cli.vuejs.org/zh/guide/mode-and-env.html#在客户端侧代码中使用环境变量)</a></li><li class="sidebar-sub-header"><a href="/vue-config/vue-mode-env/#只在本地有效的变量" class="sidebar-link">只在本地有效的变量[#](https://cli.vuejs.org/zh/guide/mode-and-env.html#只在本地有效的变量)</a></li></ul></li><li><a href="/vue-config/system-config/" class="sidebar-link">vue项目配置系统变量</a></li><li><a href="/vue-config/axios-optimization-one/" class="sidebar-link">vue项目axios请求优化（一）</a></li><li><a href="/vue-config/axios-optimization-two/" class="sidebar-link">vue项目axios请求优化（二）</a></li><li><a href="/vue-config/axios-optimization-three/" class="sidebar-link">vue项目axios请求优化（三）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>前端工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/tool/use-nvm/" class="sidebar-link">nvm的使用</a></li><li><a href="/tool/vscode/sftp/" class="sidebar-link">vscode插件之sftp</a></li><li><a href="/tool/vscode/koroFileHeader/" class="sidebar-link">vscode插件之koroFileHeader</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue项目的模式和环境变量"><a href="#vue项目的模式和环境变量" class="header-anchor">#</a> vue项目的模式和环境变量<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F%E5%92%8C%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F" target="_blank" rel="noopener noreferrer">#<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h1> <h2 id="模式"><a href="#模式" class="header-anchor">#</a> 模式<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F" target="_blank" rel="noopener noreferrer">#<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <p><strong>模式</strong>是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：</p> <ul><li><code>development</code> 模式用于 <code>vue-cli-service serve</code></li> <li><code>test</code> 模式用于 <code>vue-cli-service test:unit</code></li> <li><code>production</code> 模式用于 <code>vue-cli-service build</code> 和 <code>vue-cli-service test:e2e</code></li></ul> <p>你可以通过传递 <code>--mode</code> 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：</p> <div class="language- extra-class"><pre class="language-text"><code>vue-cli-service build --mode development
</code></pre></div><p>当运行 <code>vue-cli-service</code> 命令时，所有的环境变量都从对应的<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F" target="_blank" rel="noopener noreferrer">环境文件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中载入。如果文件内部不包含 <code>NODE_ENV</code> 变量，它的值将取决于模式，例如，在 <code>production</code> 模式下被设置为 <code>&quot;production&quot;</code>，在 <code>test</code> 模式下被设置为 <code>&quot;test&quot;</code>，默认则是 <code>&quot;development&quot;</code>。</p> <p><code>NODE_ENV</code> 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。</p> <p>例如通过将 <code>NODE_ENV</code> 设置为 <code>&quot;test&quot;</code>，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。</p> <p>同理，<code>NODE_ENV=development</code> 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。</p> <p>当你运行 <code>vue-cli-service build</code> 命令时，无论你要部署到哪个环境，应该始终把 <code>NODE_ENV</code> 设置为 <code>&quot;production&quot;</code> 来获取可用于部署的应用程序。</p> <p>NODE_ENV</p> <p>如果在环境中有默认的 <code>NODE_ENV</code>，你应该移除它或在运行 <code>vue-cli-service</code> 命令的时候明确地设置 <code>NODE_ENV</code>。</p> <h2 id="环境变量"><a href="#环境变量" class="header-anchor">#</a> 环境变量<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F" target="_blank" rel="noopener noreferrer">#<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <p>你可以在你的项目根目录中放置下列文件来指定环境变量：</p> <div class="language- extra-class"><pre class="language-text"><code>.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
</code></pre></div><p>一个环境文件只包含环境变量的“键=值”对：</p> <div class="language- extra-class"><pre class="language-text"><code>FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
</code></pre></div><p>警告</p> <p>不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！</p> <p>环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。</p> <p>请注意，只有 <code>NODE_ENV</code>，<code>BASE_URL</code> 和以 <code>VUE_APP_</code> 开头的变量将通过 <code>webpack.DefinePlugin</code> 静态地嵌入到<em>客户端侧</em>的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。</p> <p>想要了解解析环境文件规则的细节，请参考 <a href="https://github.com/motdotla/dotenv#rules" target="_blank" rel="noopener noreferrer">dotenv<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。我们也使用 <a href="https://github.com/motdotla/dotenv-expand" target="_blank" rel="noopener noreferrer">dotenv-expand<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 来实现变量扩展 (Vue CLI 3.5+ 支持)。例如：</p> <div class="language- extra-class"><pre class="language-text"><code>FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar
</code></pre></div><p>被载入的变量将会对 <code>vue-cli-service</code> 的所有命令、插件和依赖可用。</p> <p>环境文件加载优先级</p> <p>为一个特定模式准备的环境文件 (例如 <code>.env.production</code>) 将会比一般的环境文件 (例如 <code>.env</code>) 拥有更高的优先级。</p> <p>此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 <code>.env</code> 文件覆写。</p> <p><code>.env</code> 环境文件是通过运行 <code>vue-cli-service</code> 命令载入的，因此环境文件发生变化，你需要重启服务。</p> <h2 id="示例-staging-模式"><a href="#示例-staging-模式" class="header-anchor">#</a> 示例：Staging 模式<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%A4%BA%E4%BE%8B%EF%BC%9Astaging-%E6%A8%A1%E5%BC%8F" target="_blank" rel="noopener noreferrer">#<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <p>假设我们有一个应用包含以下 <code>.env</code> 文件：</p> <div class="language- extra-class"><pre class="language-text"><code>VUE_APP_TITLE=My App
</code></pre></div><p>和 <code>.env.staging</code> 文件：</p> <div class="language- extra-class"><pre class="language-text"><code>NODE_ENV=production
VUE_APP_TITLE=My App (staging)
</code></pre></div><ul><li><code>vue-cli-service build</code> 会加载可能存在的 <code>.env</code>、<code>.env.production</code> 和 <code>.env.production.local</code> 文件然后构建出生产环境应用。</li> <li><code>vue-cli-service build --mode staging</code> 会在 staging 模式下加载可能存在的 <code>.env</code>、<code>.env.staging</code> 和 <code>.env.staging.local</code> 文件然后构建出生产环境应用。</li></ul> <p>这两种情况下，根据 <code>NODE_ENV</code>，构建出的应用都是生产环境应用，但是在 staging 版本中，<code>process.env.VUE_APP_TITLE</code> 被覆写成了另一个值。</p> <h2 id="在客户端侧代码中使用环境变量"><a href="#在客户端侧代码中使用环境变量" class="header-anchor">#</a> 在客户端侧代码中使用环境变量<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E5%9C%A8%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%BE%A7%E4%BB%A3%E7%A0%81%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F" target="_blank" rel="noopener noreferrer">#<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <p>只有以 <code>VUE_APP_</code> 开头的变量会被 <code>webpack.DefinePlugin</code> 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：</p> <div class="language- extra-class"><pre class="language-text"><code>console.log(process.env.VUE_APP_SECRET)
</code></pre></div><p>在构建过程中，<code>process.env.VUE_APP_SECRET</code> 将会被相应的值所取代。在 <code>VUE_APP_SECRET=secret</code> 的情况下，它会被替换为 <code>&quot;secret&quot;</code>。</p> <p>除了 <code>VUE_APP_*</code> 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：</p> <ul><li><code>NODE_ENV</code> - 会是 <code>&quot;development&quot;</code>、<code>&quot;production&quot;</code> 或 <code>&quot;test&quot;</code> 中的一个。具体的值取决于应用运行的<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F" target="_blank" rel="noopener noreferrer">模式<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</li> <li><code>BASE_URL</code> - 会和 <code>vue.config.js</code> 中的 <code>publicPath</code> 选项相符，即你的应用会部署到的基础路径。</li></ul> <p>所有解析出来的环境变量都可以在 <code>public/index.html</code> 中以 <a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E6%8F%92%E5%80%BC" target="_blank" rel="noopener noreferrer">HTML 插值<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中介绍的方式使用。</p> <p>提示</p> <p>你可以在 <code>vue.config.js</code> 文件中计算环境变量。它们仍然需要以 <code>VUE_APP_</code> 前缀开头。这可以用于版本信息:</p> <div class="language- extra-class"><pre class="language-text"><code>process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}
</code></pre></div><h2 id="只在本地有效的变量"><a href="#只在本地有效的变量" class="header-anchor">#</a> 只在本地有效的变量<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html#%E5%8F%AA%E5%9C%A8%E6%9C%AC%E5%9C%B0%E6%9C%89%E6%95%88%E7%9A%84%E5%8F%98%E9%87%8F" target="_blank" rel="noopener noreferrer">#<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <p>有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 <code>.env.local</code> 文件取而代之。本地环境文件默认会被忽略，且出现在 <code>.gitignore</code> 中。</p> <p><code>.local</code> 也可以加在指定模式的环境文件上，比如 <code>.env.development.local</code> 将会在 development 模式下被载入，且被 git 忽略。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/vue-config/svg-sprite-loader/" class="prev">
        vue项目配置使用svg图标
      </a></span> <span class="next"><a href="/vue-config/system-config/">
        vue项目配置系统变量
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><!----></div></div>
    <script src="/assets/js/app.36e8cb25.js" defer></script><script src="/assets/js/2.cd8e88cf.js" defer></script><script src="/assets/js/41.5dfb852e.js" defer></script>
  </body>
</html>
